<template>
  <div class="topbar">
    <div class="wrap topbar-box">
      <div class="topbar-l">欢迎来到叩丁狼积分商城</div>
      <ul class="topbar-r">
        <li>
          <a href="#">
            <img
              src="../assets/img/userImg.f8bbec5e.png"
              class="user-headImg"
            />
            <label>用户名：</label>
            <span>未登录</span>
          </a>
        </li>
        <li><a href="#"> 我的积分：--</a></li>
        <li><a href="#">获取积分</a></li>
        <li><a href="#">叩丁狼官网</a></li>
        <li class="login" v-if="!isShowLoginState">
          <button @click="changeIsShowLoginModal(true)">登录</button>
        </li>
        <li class="gwc" v-else>
          <a href="#">
            <img src="../assets/img/cart.png" alt="" />
            <label>购物车</label>
            <span>5</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { WeiXinLoginAPI } from "@/request/api";
export default {
  async created() {
    let mycode = this.$route.query.code;
    if (mycode) {
      let res = await WeiXinLoginAPI({
        code: mycode,
      });

      if (res.code == 0) {
        this.asyncIsShowToast({
          show: true,
          msg: "扫码登录成功",
          type: "success",
        });
        localStorage.setItem("x-auth-token", res["x-auth-token"]);
        // this.$router.push(this.$route.path);
        this.changeIsLogined(true);
      } else if (res.code == 400) {
        this.asyncIsShowToast({
          show: true,
          msg: "登录失败或二维码失效，请重新扫码",
          type: "warning",
        });
        this.changeIsShowLoginModal(true);
      } else if (res.code == 407) {
        this.asyncIsShowToast({
          show: true,
          msg: "请使用手机再登录一次",
          type: "warning",
        });
        this.changeIsShowLoginModal(true);
        localStorage.setItem("uuid", res.uuid);
      }
    }
  },
  methods: {
    ...mapMutations({
      changeIsShowLoginModal: "showModal/changeIsShowLoginModal",
      changeIsShowToast: "showToast/changeIsShowToast",
      changeIsLogined: "loginStates/changeIsLogined",
    }),
    ...mapActions({
      asyncIsShowToast: "showToast/asyncIsShowToast",
    }),
  },
  computed: {
    ...mapState({
      isShowLoginState: (state) => {
        // console.log(state.showModal);
        return state.loginStates.isLogined;
      },
    }),
  },
};
</script>

<style lang="less" scoped>
.topbar {
  height: 40px;
  background: #242b39;
  color: white;
  font-size: 14px;
  .topbar-box {
    display: flex;
    height: 40px;
    justify-content: space-between;
    .topbar-l {
      font-family: SourceHanSansSC;
      font-weight: 300;
      flex: 1;
      line-height: 40px;
    }
    .topbar-r {
      display: flex;
      align-items: center;
      justify-content: space-around;
      li {
        margin-right: 20px;
        a {
          display: flex;
          align-items: center;
          font-size: 14px;
        }
        .user-headImg {
          width: 26px;
          height: 26px;
          background: #7d8696;
          border-radius: 50%;
          margin-right: 5px;
        }
        &.login {
          margin: 0;
          button {
            width: 124px;
            height: 40px;
            background: #0a328e;
            border: 0;
            color: #fffefe;
            cursor: pointer;
          }
        }
        &.gwc {
          width: 124px;
          height: 40px;
          background: #0a328e;
          text-align: center;
          display: flex;
          // display: none;
          justify-content: center;
          margin: 0;
          cursor: pointer;
          label {
            margin: 0 5px;
            cursor: pointer;
          }
          span {
            display: inline-block;
            height: 22px;
            width: 22px;
            background: #fd604d;
            border-radius: 50%;
            line-height: 22px;
            // vertical-align: middle;
          }
        }
      }
      a {
        color: white;
      }
    }
  }
}
</style>